<template>
  <div>
    <el-carousel
        :interval="4000"
        type="card"
        height="300px"
        ref="carousel"
        :indicator-position="indicatorPosition"
        :initial-index="0"
        class="custom-carousel"
    >
      <div style="margin-top: 50px;"></div>
      <el-carousel-item v-for="(item, index) in topCarouselList" :key="index">
        <div class="carousel-image">
          <img :src="item.src" alt="Image"/>
          <h3 class="medium" style="color: #ffba00; font-weight: 800; font-size: 20px">{{ item.remark }}</h3>
        </div>
      </el-carousel-item>
    </el-carousel>

    <div style="margin-left: 220px;margin-right: 220px">
      <h2 class="title">歌单推荐</h2>
      <div class="content-below-carousel">
        <div class="movie-item" v-for="(item, index) in noTopCarouselList" :key="index">
          <img
              v-if="index < musicType.length"
              :src="item.src"
              alt="Movie Poster"
              class="movie-poster"
              @click="handleImageClick(index, item)"/>
          <div v-if="index < musicType.length" class="movie-info">
            <h3 class="movie-title">{{ musicType[index].musicTypeName }}</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import {getUserInfo} from "@/utils/auth";

export default {
  name: 'MainIndex',
  data() {
    return {
      indicatorPosition: 'outside',
      items: [
        {remark: '起风了', src: 'http://file.pipi.com/statics/2024/10/30/lun6_20241030133533A001.jpg'},
        {remark: '刚好遇见你', src: 'http://file.pipi.com/statics/2024/10/30/lun2_20241030140903A002.jpg'}
      ],
      musicType: [],
      userInfo: {},
      topCarouselList: [],
      noTopCarouselList: []
    };
  },
  methods: {
    handleImageClick(index) {
      // 存储音乐类型 ID 到响应式变量
      this.$router.push("/MainMusic?musicTypeId=" + this.musicType[index].musicTypeId);
      localStorage.setItem("musicTypeId", this.musicType[index].musicTypeId)
    },
    getMusicTypeList() {
      request({
        url: '/music/musictype/web/list',
        method: 'get',
      }).then(res => {
        this.musicType = res.rows;
      })
    },
    getCarouselList() {
      request({
        url: '/music/carousel/web/list',
        method: 'get'
      }).then(res => {
        console.log(res)
        this.items = res.rows;
        this.getTopCarouselList()
        this.getNoTopCarouselList()
      })
    },
    getTopCarouselList() {
      console.log("getTopCarouselList")
      console.log(this.items)
      this.items.forEach(item => {
        if (item.typeId === 1) {
          this.topCarouselList.push(item)
        }
      })
    },
    getNoTopCarouselList() {
      console.log("getNoTopCarouselList")
      console.log(this.items)
      this.items.forEach(item => {
        if (item.typeId === 2) {
          this.noTopCarouselList.push(item)
        }
      })
    }
  },
  created() {
    this.getMusicTypeList();
    this.userInfo = getUserInfo()
    this.getCarouselList()
  }
};
</script>

<style scoped>
.custom-carousel {
  width: 100%;
  margin: 20px auto 0;
}

.el-carousel__item .carousel-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.el-carousel__item img {
  height: 300px;
  object-fit: cover;
}

.el-carousel__item:not(.is-active) img {
  width: 30%; /* 缩小左右两边图片的宽度 */
}

.el-carousel__item.is-active img {
  width: 100%; /* 当前展示的图片宽度为100% */
}

.el-carousel__item h3 {
  font-size: 20px;
  opacity: 0.75;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
}

.content-below-carousel {
  margin-top: 20px; /* 与轮播图保持一定距离 */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.movie-item {
  width: calc(20% - 10px); /* 设置每个电影项宽度为20% */
  margin: 5px;
  text-align: center;
}

.movie-poster {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
}

.movie-info {
  margin-top: 10px;
}

.movie-title {
  font-size: 16px;
  margin-bottom: 5px;
}

.movie-rating {
  font-size: 14px;
  color: #666;
}

.buy-ticket {
  padding: 8px 20px;
  background-color: #ffba00;
  color: white;
  border-radius: 5px;
  margin-top: 10px;
  cursor: pointer;
  font-size: 14px;
}
</style>